<template>
  <div id="register" v-loading="loading" element-loading-text="注册中...">
    <div class="header">
      <a @click="backMethod">
        <i class="el-icon-arrow-left" style="font-size: 20px; color:white;">返回</i>
      </a>
    </div>
    <h2 style="color: white;">用户注册</h2>
    <main>
      <li><input type="text" v-model="phoneNum" placeholder="请输入手机号" /></li>
      <li><input type="password" v-model="userPwd" placeholder="请输入密码" /></li>
      <li><input type="password" v-model="comfirmPwd" placeholder="确认密码" /></li>
      <li>
        <input type="text" v-model="captcha" @keyup.enter="register()" placeholder="请输入验证码"/>
        <el-button ref="getCaptchaBtn" id="getCaptchaBtn" @click="getCaptcha" :disabled="isUsing" >获取验证码</el-button>
      </li>
      <button @click="register">注册</button>
    </main>
  </div>
</template>

<script>
  export default {
  	name: "",
  	components: {
  	},
  	data() {
  		return {
        phoneNum: "",
        userPwd: "",
        comfirmPwd:"",
        //验证码
        captcha: "",
        loading: false,
        captchaEntity : {},
        //验证码防刷相关参数
        timeout:60,
        isUsing:false,
        //是否允许注册方法执行
        execute:false,
  		}
  	},

    mounted() {
    },
    methods:{
      //手机号验证
      phoneVerify(){
        var self = this;
        //11位手机号码正则
        var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        return reg_tel.test(self.phoneNum);
      },
      //获取验证码
      getCaptcha(){
        var self = this;
        if(self.phoneVerify()){
          this.isUsing = true
          //执行样式更改方法
          this.changeTimeOutStyle()
          this.$http.post("/api/CakeShop/sms/sendCode",
          	{
              userPhone:self.phoneNum,
            }
          ).then(
            function(res) {
              if(res.data.code == 200){
                self.$message({
                	duration: 1500,
                	message: "已发送验证码!",
                	type: "success",
                	onClose: function() {
                	},
                });
              }else{
                self.$message({
                	duration: 1500,
                	message: res.data.msg,
                	type: "error",
                	onClose: function() {
                	},
                });
              }
            }
          );
        }else{
          self.$message({
          	duration: 1500,
          	message: "手机号不符合规格或为空!",
          	type: "error",
          	onClose: function() {
          	},
          });
        }
      },
      //验证码防刷
      changeTimeOutStyle(){
        if(this.$refs.getCaptchaBtn){
          if(this.timeout == 0){
            // document.getElementById("getCaptchaBtn").innerHTML = '获取验证码'
            this.$refs.getCaptchaBtn.$el.innerText = '获取验证码'
            this.timeout = 60
            this.isUsing = false
          }else{
            var str = this.timeout + "s"
            // document.getElementById("getCaptchaBtn").innerHTML = str;
            this.$refs.getCaptchaBtn.$el.innerText = str
            this.timeout = this.timeout - 1;
            setTimeout(()=>this.changeTimeOutStyle(),1000)
          }
        }
      },
      //注册方法
      register(){
        var self = this
        //执行验证方法
        this.registerVerify();
        if(this.execute){
          this.$http.post("/api/CakeShop/sms/register",
          	{
              userPhone:self.phoneNum,
              userPass:self.userPwd,
              phoneCaptcha:self.captcha,
            }
          ).then(
            function(res) {
              if(res.data.code == 200){
                self.$message({
                	duration: 1500,
                	message: "注册成功!",
                	type: "success",
                	onClose: function() {
                    self.loading = false;
                    self.$router.push({
                    	path: "/userLogin"
                    });
                	},
                });
              }else{
                self.$message({
                	duration: 1500,
                	message: res.data.msg,
                	type: "error",
                	onClose: function() {
                    self.loading = false;
                	},
                });
              }
            }
          );
        }
      },
      //验证方法
      registerVerify(){
        var self = this;
      	this.loading = true;
        if (!self.phoneVerify() || self.userPwd === "") {
        	self.$message({
        		duration: 1500,
        		message: "手机号或密码格式不正确!",
        		type: "error",
        		onClose: function() {
        			self.loading = false;
        		},
        	});
        }else if(self.comfirmPwd != self.userPwd){
          self.$message({
          	duration: 1500,
          	message: "两次输入密码不一致!",
          	type: "error",
          	onClose: function() {
          		self.loading = false;
          	},
          });
        }
        else if(self.captcha == ""){
          self.$message({
        		duration: 1500,
        		message: "验证码不能为空!",
        		type: "error",
        		onClose: function() {
        			self.loading = false;
        		},
        	});
        }else{
          self.execute = true;
        }
      },
      //返回方法
      backMethod(){
        // let lastPage = sessionStorage.getItem("lastPage");
        this.$router.push({
          path: "/userLogin"
        });
      },
    }
  }
</script>

<style scoped>
  li{
    list-style: none;
  }
  .header{
    display: flex;
    padding-left: 30px;
    height: 80px !important;
    line-height: 80px;

  }
  #register{
    height: 100%;
    background-image: url('../../../static/img/back.png');
    background-size: 100% 100%;
  }
  #register main{
    display: flex;
    flex-direction: column;
    /* width: 400px; */
    margin: 20px 15px 0;
    background: rgba(255,255,255,0.7);
    padding: 20px 25px;
    box-sizing: border-box;
    border-radius: 5px;
  }
  #register li{
    list-style: none;
    /* width: 100%; */
    margin:10px 0 20px;
    display: flex;
  }
  #register li input{
    width: 100%;
  	height: 35px;
  	border:1px solid #ddd;
  	border-radius: 5px;
  	padding: 0 10px;
  	box-sizing: border-box;
  }
  #register li button{
    /* width: 100px; */
    margin-left: 15px;
    background-color: #f97487;
  }
  #register button{
  	width: 100%;
  	font-weight: 600;
  	color: #FFFFFF;
  	border:0 none;
  	background: #f97487;
  	padding: 10px 0;
  	border-radius: 5px;
  }
</style>
